import styles from '../styles.less';
import {useState} from 'react';
import {Button, Col, Form, Input, Row, Select, DatePicker} from 'antd';
import {DownOutlined, UpOutlined} from '@ant-design/icons';
import {connect} from 'umi';
import {formatRangeDate} from "@/utils/utils";

const {RangePicker} = DatePicker;

const SearchForm = (props) => {

  const {submitting} = props;
  const {setTablePayload, tablePayload, setSelectedRowKeys} = props.data;
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);

  /* 搜索提交 */
  const onFinish = (values) => {
    if (values.createTime) {
      let {start, end} = formatRangeDate(values.createTime);
      values.createTimeStart = start;
      values.createTimeEnd = end;
      values.createTime = undefined;
    }
    setTablePayload({...tablePayload, pageNum: 1, param: {...values}});
    setSelectedRowKeys([]);
  };

  /* 搜索重置 */
  const onReset = () => {
    form.resetFields();
    setTablePayload({...tablePayload, pageNum: 1, param: {}});
    setSelectedRowKeys([]);
  };

  return (
    <Form form={form} labelCol={{span: 6}} className={styles.mySearchForm} onFinish={onFinish}>
      {!expand ? (
        <Row gutter={32}>
          <Col span={8}>
            <Form.Item name={`username`} label={`登录账号`}>
              <Input placeholder='请输入登录账号'/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name={`ipaddr`} label={`登录地址`}>
              <Input placeholder='请输入登录地址'/>
            </Form.Item>
          </Col>
          <Col span={8} style={{textAlign: 'right'}}>
            <Button type='primary' htmlType='submit' loading={submitting}>
              查询
            </Button>
            <Button style={{margin: '0 8px'}} onClick={() => onReset()}>
              重置
            </Button>
            <a style={{fontSize: 12}} onClick={() => setExpand(!expand)}>
              <DownOutlined/> 展开
            </a>
          </Col>
        </Row>
      ) : (
        <>
          <Row gutter={32}>
            <Col span={8}>
              <Form.Item name={`username`} label={`登录账号`}>
                <Input placeholder='请输入登录账号'/>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name={`ipaddr`} label={`登录地址`}>
                <Input placeholder='请输入登录地址'/>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name={`status`} label={`登录状态`}>
                <Select placeholder='请选择登录状态'>
                  <Select.Option value={'0'}>失败</Select.Option>
                  <Select.Option value={'1'}>成功</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={32} style={{marginTop: '16px'}}>
            <Col span={8}>
              <Form.Item name={`createTime`} label={`创建时间`}>
                <RangePicker style={{width: '100%'}}/>
              </Form.Item>
            </Col>
            <Col span={16} style={{textAlign: 'right'}}>
              <Button type='primary' htmlType='submit' loading={submitting}>
                查询
              </Button>
              <Button style={{margin: '0 8px'}} onClick={() => onReset()}>
                重置
              </Button>
              <a style={{fontSize: 12}} onClick={() => setExpand(!expand)}>
                <UpOutlined/> 收起
              </a>
            </Col>
          </Row>
        </>
      )}
    </Form>
  );
};

export default connect(({loading}) => {
  return {
    submitting: loading.effects['PSystemLoginLog/fetchList'],
  };
})(SearchForm);
